import React, {memo, useRef, useState} from 'react';
import {Carousel} from 'antd';
import Rating from '@mui/material/Rating';
import {ItemWrapper} from '@/components/room-item/style'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import Indicator from "@/base-ui/indicator";
import classNames from "classnames";

const RoomItem = memo((props) => {
    const {itemData, itemWidth = '25%',itemClick} = props;

    const sliderRef = useRef();
    const [selectIndex, setSelectIndex] = useState(0)

    // 轮播图 左右 箭头 点击
    const controlClickHandle = (event, isRight = true) => {
        event.stopPropagation()
        isRight ? sliderRef.current.next() : sliderRef.current.prev()
        let newIndex = isRight ? selectIndex + 1 : selectIndex - 1;
        const length = itemData.picture_urls.length
        if (newIndex < 0) newIndex = length - 1;
        if (newIndex > length) newIndex = 0;
        setSelectIndex(newIndex);
    }
    // 跳转detail详情
    const itemClickHandle =(item)=>{
        if(itemClick) itemClick(item)
    }


    const pictureElement = (
        <div className="cover">
            <img src={itemData.picture_url} alt=""/>
        </div>
    )
    const sliderElement = (
        <div className="slider">
            <div className="control">
                <div className="btn left" onClick={e => controlClickHandle(e, false)}>
                    <IconArrowLeft width='20' height='20'></IconArrowLeft>
                </div>
                <div className="btn right" onClick={e => controlClickHandle(e, true)}>
                    <IconArrowRight width='20' height='20'></IconArrowRight>
                </div>
            </div>
            {/*轮播图*/}
            <Carousel dots={false} ref={sliderRef}>
                {
                    itemData.picture_urls?.map(item => {
                        return (
                            <div className="cover" key={item}>
                                <img src={item} alt=""/>
                            </div>
                        )
                    })
                }
            </Carousel>
            {/*指示器*/}
            <div className="indicator">
                <Indicator selectIndex={selectIndex}>
                    {
                        itemData.picture_urls?.map((item, index) => {
                            return (
                                <div className='item' key={item}>
                                    <span className={classNames('dot', {active: selectIndex === index})}></span>
                                </div>
                            )
                        })
                    }
                </Indicator>
            </div>
        </div>
    )


    return (
        <ItemWrapper verifycolor={itemData?.verify_info?.text_color || "#36576a"}
                     itemwidth={itemWidth}
                     onClick={e=>itemClickHandle(itemData)}
        >
            <div className="inner">
                {
                    itemData.picture_urls ? sliderElement : pictureElement
                }
                <div className="desc">
                    {itemData.verify_info.messages.join(' · ')}
                </div>
                <div className="name">
                    {itemData.name}
                </div>
                <div className="price">
                    ￥{itemData.price}/晚
                </div>
                <div className="bottom">
                    <Rating value={itemData.star_rating ?? 5} precision={0.1}
                            readOnly sx={{fontSize: "12px", color: "#00848a", marginRight: '-1px'}}>
                        <span className="count">{itemData.reviews_count}</span>
                        {
                            itemData.bottom_info && <span className="extra">{itemData.bottom_info.content}</span>
                        }
                    </Rating>
                </div>

            </div>
        </ItemWrapper>
    );
});

export default RoomItem;
